<template>
  <div class="format-settings-container">
    <div class="page-header">
      <h2>⚙️ 格式设置</h2>
      <p>自定义文档转换参数，获得最佳转换效果</p>
    </div>

    <div class="settings-content" if.bind="!isLoading">
      <!-- Markdown 设置 -->
      <div class="settings-section">
        <h3>📝 Markdown 设置</h3>
        <div class="settings-grid">
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.markdown.addTitle"
                     change.trigger="updateMarkdownSetting('addTitle', $event.target.checked)">
              添加标题
            </label>
            <p class="setting-description">在文档开头添加一级标题</p>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.markdown.preserveLineBreaks"
                     change.trigger="updateMarkdownSetting('preserveLineBreaks', $event.target.checked)">
              保留换行符
            </label>
            <p class="setting-description">保持原文档的换行格式</p>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.markdown.useCodeBlocks"
                     change.trigger="updateMarkdownSetting('useCodeBlocks', $event.target.checked)">
              使用代码块
            </label>
            <p class="setting-description">将代码内容格式化为代码块</p>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.markdown.preserveImages"
                     change.trigger="updateMarkdownSetting('preserveImages', $event.target.checked)">
              保留图片
            </label>
            <p class="setting-description">在转换后保留图片</p>
          </div>
          
          <div class="setting-item">
            <label for="imageFormat">图片格式</label>
            <select id="imageFormat" 
                    value.bind="settings.markdown.imageFormat"
                    change.trigger="updateMarkdownSetting('imageFormat', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getImageFormatOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
        </div>
      </div>

      <!-- Word 设置 -->
      <div class="settings-section">
        <h3>📄 Word 设置</h3>
        <div class="settings-grid">
          <div class="setting-item">
            <label for="wordFontSize">字体大小</label>
            <input type="number" 
                   id="wordFontSize"
                   value.bind="settings.word.fontSize"
                   change.trigger="updateWordSetting('fontSize', parseInt($event.target.value))"
                   min="8" max="72" 
                   class="form-input">
          </div>
          
          <div class="setting-item">
            <label for="wordFontFamily">字体族</label>
            <select id="wordFontFamily" 
                    value.bind="settings.word.fontFamily"
                    change.trigger="updateWordSetting('fontFamily', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getFontFamilyOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
          
          <div class="setting-item">
            <label for="lineSpacing">行间距</label>
            <input type="number" 
                   id="lineSpacing"
                   value.bind="settings.word.lineSpacing"
                   change.trigger="updateWordSetting('lineSpacing', parseFloat($event.target.value))"
                   min="1" max="3" step="0.1" 
                   class="form-input">
          </div>
          
          <div class="setting-item">
            <label for="pageMargins">页边距</label>
            <select id="pageMargins" 
                    value.bind="settings.word.pageMargins"
                    change.trigger="updateWordSetting('pageMargins', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getPageMarginsOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.word.includeImages"
                     change.trigger="updateWordSetting('includeImages', $event.target.checked)">
              包含图片
            </label>
            <p class="setting-description">在转换后包含图片</p>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.word.preserveFormatting"
                     change.trigger="updateWordSetting('preserveFormatting', $event.target.checked)">
              保留格式
            </label>
            <p class="setting-description">尽可能保持原文档的格式</p>
          </div>
        </div>
      </div>

      <!-- PDF 设置 -->
      <div class="settings-section">
        <h3>📋 PDF 设置</h3>
        <div class="settings-grid">
          <div class="setting-item">
            <label for="pageSize">页面大小</label>
            <select id="pageSize" 
                    value.bind="settings.pdf.pageSize"
                    change.trigger="updatePdfSetting('pageSize', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getPageSizeOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
          
          <div class="setting-item">
            <label for="orientation">页面方向</label>
            <select id="orientation" 
                    value.bind="settings.pdf.orientation"
                    change.trigger="updatePdfSetting('orientation', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getOrientationOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
          
          <div class="setting-item">
            <label for="pdfFontSize">字体大小</label>
            <input type="number" 
                   id="pdfFontSize"
                   value.bind="settings.pdf.fontSize"
                   change.trigger="updatePdfSetting('fontSize', parseInt($event.target.value))"
                   min="8" max="72" 
                   class="form-input">
          </div>
          
          <div class="setting-item">
            <label for="pdfFontFamily">字体族</label>
            <select id="pdfFontFamily" 
                    value.bind="settings.pdf.fontFamily"
                    change.trigger="updatePdfSetting('fontFamily', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getFontFamilyOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
          
          <div class="setting-item">
            <label for="quality">质量</label>
            <select id="quality" 
                    value.bind="settings.pdf.quality"
                    change.trigger="updatePdfSetting('quality', $event.target.value)"
                    class="form-select">
              <option repeat.for="option of getQualityOptions()" 
                      value.bind="option.value">
                ${option.label}
              </option>
            </select>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">
              <input type="checkbox" 
                     checked.bind="settings.pdf.includeImages"
                     change.trigger="updatePdfSetting('includeImages', $event.target.checked)">
              包含图片
            </label>
            <p class="setting-description">在PDF中包含图片</p>
          </div>
        </div>
      </div>

      <!-- 设置管理 -->
      <div class="settings-actions">
        <button type="button" 
                class="btn btn-primary"
                click.trigger="saveSettings()">
          💾 保存设置
        </button>
        <button type="button" 
                class="btn btn-secondary"
                click.trigger="resetSettings()">
          🔄 重置设置
        </button>
        <button type="button" 
                class="btn btn-outline"
                click.trigger="exportSettings()">
          📤 导出设置
        </button>
        <label class="btn btn-outline file-input-label">
          📥 导入设置
          <input type="file" 
                 accept=".json"
                 change.trigger="importSettings($event)"
                 style="display: none;">
        </label>
      </div>

      <!-- 成功/错误消息 -->
      <div class="message-area">
        <div class="alert alert-success" if.bind="successMessage">
          <span class="alert-icon">✅</span>
          <span class="alert-text">${successMessage}</span>
        </div>
        <div class="alert alert-error" if.bind="errorMessage">
          <span class="alert-icon">⚠️</span>
          <span class="alert-text">${errorMessage}</span>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" if.bind="isLoading">
      <div class="loading-spinner"></div>
      <p>正在加载设置...</p>
    </div>
  </div>
</template> 